<template>
  <div class="chart-container">
    <el-table :data="tableData" style="width: 100%"
     :span-method="objectSpanMethod"
    
    >
      <el-table-column label>
        <template slot="header">日期</template>
        <el-table-column prop="region_name" label="制程段"></el-table-column>
        <el-table-column prop="line_name" label="线"></el-table-column>
      </el-table-column>

      <el-table-column label>
        <template slot="header">{{tableData[0].title}}</template>
        <el-table-column label>
          <template slot="header">白班</template>
          <el-table-column prop="lz" label="应提交"></el-table-column>
          <el-table-column prop="lzl" label="实提交"></el-table-column>
        </el-table-column>

        <el-table-column label>
          <template slot="header">夜班</template>
          <el-table-column prop="lzT" label="应提交"></el-table-column>
          <el-table-column prop="lzlT" label="实提交"></el-table-column>
        </el-table-column>
      </el-table-column>

      <el-table-column label>
        <template slot="header">{{tableData[0].title1}}</template>
        <el-table-column label>
          <template slot="header">白班</template>
          <el-table-column prop="lz1" label="应提交"></el-table-column>
          <el-table-column prop="lzl1" label="实提交"></el-table-column>
        </el-table-column>

        <el-table-column label>
          <template slot="header">夜班</template>
          <el-table-column prop="lz1T" label="应提交"></el-table-column>
          <el-table-column prop="lzl1T" label="实提交"></el-table-column>
        </el-table-column>
      </el-table-column>

      <el-table-column label>
        <template slot="header">{{tableData[0].title2}}</template>
        <el-table-column label>
          <template slot="header">白班</template>
          <el-table-column prop="lz2" label="应提交"></el-table-column>
          <el-table-column prop="lzl2" label="实提交"></el-table-column>
        </el-table-column>

        <el-table-column label>
          <template slot="header">夜班</template>
          <el-table-column prop="lz2T" label="应提交"></el-table-column>
          <el-table-column prop="lzl2T" label="实提交"></el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>

    <!-- <button @click="getTableDataFm">点击</button> -->
  </div>
</template>

<script>
export default {
  name: "demoTwo",
  filters: {},
  data() {
    return {
      tableData: [
      
      ],
       spanArr: [],//用于存放每一行记录的合并数
        pos:0, 

    };
  },
  created() {},
  mounted() {
    //数据结构是 2021/07白班    2021/07夜班  2021/08白班    2021/08夜班    2021/09白班    2021/09夜班
    let res = {
      retCode: "OK",
      errCode: null,
      errMsg: null,
      data: [
        {
          monthDate: "2021/07",
          shift: "0",
          region_name: null,
          line_name: "3PCBAP",
          ytj: 31,
          stj: 0,
          syl: 0
        },
        {
          monthDate: "2021/07",
          shift: "1",
          region_name: null,
          line_name: "3PCBAP",
          ytj: 31,
          stj: 0,
          syl: 0
        },
        {
          monthDate: "2021/08",
          shift: "0",
          region_name: null,
          line_name: "3PCBAP",
          ytj: 31,
          stj: 1,
          syl: 0.0322580645161290322580645161
        },
        {
          monthDate: "2021/08",
          shift: "1",
          region_name: null,
          line_name: "3PCBAP",
          ytj: 31,
          stj: 0,
          syl: 0
        },
        {
          monthDate: "2021/09",
          shift: "0",
          region_name: null,
          line_name: "3PCBAP",
          ytj: 30,
          stj: 1,
          syl: 0.0333333333333333333333333333
        },
        {
          monthDate: "2021/09",
          shift: "1",
          region_name: null,
          line_name: "3PCBAP",
          ytj: 30,
          stj: 0,
          syl: 0
        },
        {
          monthDate: "2021/07",
          shift: "0",
          region_name: "ASSY",
          line_name: "2ASSYA",
          ytj: 31,
          stj: 1,
          syl: 0.0322580645161290322580645161
        },
        {
          monthDate: "2021/07",
          shift: "1",
          region_name: "ASSY",
          line_name: "2ASSYA",
          ytj: 31,
          stj: 1,
          syl: 0.0322580645161290322580645161
        },
        {
          monthDate: "2021/08",
          shift: "0",
          region_name: "ASSY",
          line_name: "2ASSYA",
          ytj: 31,
          stj: 0,
          syl: 0
        },
        {
          monthDate: "2021/08",
          shift: "1",
          region_name: "ASSY",
          line_name: "2ASSYA",
          ytj: 31,
          stj: 0,
          syl: 0
        },
        {
          monthDate: "2021/09",
          shift: "0",
          region_name: "ASSY",
          line_name: "2ASSYA",
          ytj: 30,
          stj: 0,
          syl: 0
        },
        {
          monthDate: "2021/09",
          shift: "1",
          region_name: "ASSY",
          line_name: "2ASSYA",
          ytj: 30,
          stj: 0,
          syl: 0
        },
        {
          monthDate: "2021/07",
          shift: "0",
          region_name: "ASSY",
          line_name: "2ASSYE",
          ytj: 31,
          stj: 1,
          syl: 0.0322580645161290322580645161
        },
        {
          monthDate: "2021/07",
          shift: "1",
          region_name: "ASSY",
          line_name: "2ASSYE",
          ytj: 31,
          stj: 1,
          syl: 0.0322580645161290322580645161
        },
        {
          monthDate: "2021/08",
          shift: "0",
          region_name: "ASSY",
          line_name: "2ASSYE",
          ytj: 31,
          stj: 1,
          syl: 0.0322580645161290322580645161
        },
        {
          monthDate: "2021/08",
          shift: "1",
          region_name: "ASSY",
          line_name: "2ASSYE",
          ytj: 31,
          stj: 1,
          syl: 0.0322580645161290322580645161
        },
        {
          monthDate: "2021/09",
          shift: "0",
          region_name: "ASSY",
          line_name: "2ASSYE",
          ytj: 30,
          stj: 0,
          syl: 0
        },
        {
          monthDate: "2021/09",
          shift: "1",
          region_name: "ASSY",
          line_name: "2ASSYE",
          ytj: 30,
          stj: 0,
          syl: 0
        }
      ]

    };

    let arr=res.data

    let useData=[]

     for (var i = 0; i < arr.length; i += 6) {
             useData.push({
                        'region_name': arr[i].region_name,
                        'line_name': arr[i].line_name,
                        'shift': arr[i].shift,
                        'rowspan': arr[i].rowspan,

                        'title': arr[i].monthDate,
                        'lz': arr[i].ytj,
                        'lzl': arr[i].stj,
                        'commitLv': arr[i].syl,

                        'lzT': arr[i + 1].ytj,
                        'lzlT': arr[i + 1].stj,
                        'commitLvT': arr[i + 1].syl,


                        'title1': arr[i + 2].monthDate,
                        'lz1': arr[i + 2].ytj,
                        'lzl1': arr[i + 2].stj,
                        'commit1Lv': arr[i + 2].syl,

                        'lz1T': arr[i + 3].ytj,
                        'lzl1T': arr[i + 3].stj,
                        'commitLv1T': arr[i + 3].syl,

                        'title2': arr[i + 4].monthDate,
                        'lz2': arr[i + 4].ytj,
                        'lzl2': arr[i + 4].stj,
                        'commit2Lv': arr[i + 4].syl,

                        'lz2T': arr[i + 5].ytj,
                        'lzl2T': arr[i + 5].stj,
                        'commitLv2T': arr[i + 5].syl,

                    });
     }

     console.log(useData)
     this.tableData=useData
     this.getSpanArr(this.tableData)
 

  },
  methods: {
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
           if(
               columnIndex ===0 
            ) {
              // columnIndex ===0 ||  columnIndex ===3
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
                return {
                        rowspan: _row,
                        colspan: _col
                };
            }
       },
      getSpanArr(data) {
            // data就是我们从后台拿到的数据
            this.spanArr = []
            this.pos = 0
          for (var i = 0; i < data.length; i++) {
            if (i === 0) {
              this.spanArr.push(1);
              this.pos = 0;
            } else {
              // 判断当前元素与上一个元素是否相同
              if ( data[i].region_name === data[i - 1].region_name ) {
                this.spanArr[this.pos] += 1;
                this.spanArr.push(0);
              } else {
                this.spanArr.push(1);
                this.pos = i;
              }
       

            }
      

          }
        },


  }
};
</script>

<style lang = "scss" scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}

::v-deep
  .el-table__header-wrapper
  .el-table__header
  .is-group
  tr
  .hcp_headerColor {
  background: #03cbff;
}
</style>
